<template>
  <div>
    <div class="search_Jiangpin">
      &emsp;&emsp;搜索奖品 &emsp;<el-input v-model="search_name_ipt" class="search_jiangPin_ipt"
        placeholder="请输入奖品名称"></el-input> <button class="sousuo"><i class="el-icon-search"></i></button>
    </div>
    <div class="buttons">
      <el-button size="medium" type="primary" @click="addGoods">添加普通奖品</el-button>
      <el-button size="medium" type="danger">批量删除</el-button>
    </div>
    <!------->
    <el-table v-loading="loading" ref="multipleTable" :data="prizeList" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column label="ID" prop="id" width="55">
      </el-table-column>
      <el-table-column prop="name" label="奖品名称" width="120">
      </el-table-column>
      <el-table-column label="奖品图片" width="120">
        <template v-slot="scope">
          <div class="display_url_prize">
            <img :src="scope.row.display_url">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="赏品价格">
        <template v-slot="scope">
          <el-button size="small" type="warning" round>
            ￥{{ format_money(scope.row.price)}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="gaiLv" label="抽赏概率">
      </el-table-column>
      <el-table-column prop="cp" label="cp值">
      </el-table-column>
      <el-table-column prop="order" label="状态">
        <template v-slot="scope">
          <el-button v-if="scope.row.state == 0" size="mini" type="danger" round>下架</el-button>
          <el-button v-else size="mini" type="success" round>上架</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="ip_family" label="奖品类型">
        <template v-slot="scope">
          <el-button size="small" type="primary" round>
            {{ scope.row.ip_family }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="sale_time" label="预售时间">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <span class="edit_btn" @click="editGood(scope.row.uuid, scope.row.name)"><i class="el-icon-edit"></i>编辑</span>
          <span class="del_btn" @click="delGood(scope.row.uuid)"><i class="el-icon-delete"></i>删除</span>
          <span class="jia_btn" v-if="scope.row.state == 0" @click="changeState(scope.row.uuid, 1)">上架</span>
          <span class="jia_btn" v-if="scope.row.state == 1" @click="changeState(scope.row.uuid, 0)">下架</span>
        </template>
      </el-table-column>
    </el-table>
    <!------->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
      :page-sizes="[4, 6, 10, 20]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
  </div>
</template>

<script>
import goods from '../../../api/jurisdiction.js'
import {format_money} from "@/utils/format";
export default {
  data() {
    return {
      loading: true,
      search_name_ipt: '',
      page_size: 4,
      pagenum: 1,
      beiYong: [],
      prizeList: [],
    }
  },
  created() {
    this.getPrizeList()
  },
  methods: {
    format_money,
    // 跳转添加赏品
    addGoods() {
      this.$router.push("/layout/shangpinguanli/shangpinadd")
    },
    changeState(uuid, state) {
      goods.putgoods({ uuid, state }).then((res) => {
        this.getPrizeList()

      })
    },
    editGood(uuid, name) {
      this.$router.push({
        name: 'shangpinadd',
        params: { uuid, name }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page_size = val;
      this.getPrizeList()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      console.log(`当前页: ${val}`);
      this.getPrizeList()
    },
    // 删除
    delGood(uuid) {
      console.log(uuid)
      this.$confirm('确认删除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goods.putgoods({ uuid, deleted: true }).then((res) => {
          console.log(res)
          this.getPrizeList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //获取商品列表
    getPrizeList() {
      goods
        .getgoods({ params: { list: 1, page: this.pagenum, num: this.page_size } })
        .then((res) => {
          if (res.status == 200) {
            // console.log(res)
            this.prizeList = res.data
            this.loading = false
          }
        })
        .catch((err) => {
          this.$message.error("请求超时！")
          console.log(err);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
}
</script>

<style lang="less" scoped>
.search_Jiangpin {
  font-size: 14px;
}

.search_jiangPin_ipt {
  width: 250px;
}

.sousuo {
  margin: 6px;
  width: 50px;
  height: 40px;
  background: #009688;
  border: 0;
  color: white;
  font-size: 20px;
  vertical-align: middle;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  cursor: pointer;
}

.buttons {
  margin-top: 20px;
}

.edit_btn,
.del_btn,
.jia_btn {
  display: inline-block;
  cursor: pointer;
  color: white;
  border-radius: 5px;
  font-size: 13px;
  padding: 3px;
  background: #1e9fff;
}

.del_btn {
  margin-left: 8px;
  background: #ff5722;
}

.jia_btn {
  margin-left: 8px;
  background: #1e9fff;
}

.display_url_prize {
  width: 70%;
  height: 70%;
}

.display_url_prize img {
  width: 100%;
  height: 100%;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}
</style>